<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/18
  Time: 21:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>宠物领养管理后台</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/metisMenu.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/sb-admin-2.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/admin/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-heading{background-color: #337ab7;border-color: #2e6da4;font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
        .panel-heading span{position:absolute;right:10px;top:12px;}
        table{
            border-bottom: 1px solid #ddd !important;
        }
        .img-avatar {
            width: 50px;
            height: 50px;
            object-fit: cover; /* 保持图片比例，裁剪并填充整个容器 */
            border-radius: 50%; /* 使图片显示为圆形 */
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">流浪猫狗管理系统</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="/admin/developing">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user ">
                    <li>
                        <input type="hidden" id = "currentAdminId" value="${admin.id}">
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-user fa-fw"></i>
                        管理员：${admin.adminName}</a>
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/AdminLogin">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse" data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        后台管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/UserList">
                                <i class="fa fa-flash fa-fw"></i> 用户信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdminsList">
                                <i class="fa fa-flash fa-fw"></i> 管理员信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/PetList">
                                <i class="fa fa-sitemap fa-fw"></i> 宠物管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdoptList">
                                <i class="fa fa-sitemap fa-fw"></i> 领养管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/CommentList">
                                <i class="fa fa-sitemap fa-fw"></i> 评论管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/BlogListService">
                                <i class="fa fa-sitemap fa-fw"></i> 团队活动管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/ApplyList">
                                <i class="fa fa-sitemap fa-fw"></i> 志愿者的申请
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/agreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 同意领养列表
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/disagreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 不同意领养列表
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->

    </nav>
    <!-- 领养表列表查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">申请成为志愿者</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <!-- 搜索部分 -->

            <div class="panel-body">
                <form class="form-inline" method="get" action="">
                    <div class="form-group">
                        <label for="findByState">申请是否被处理</label>
                        <select class="form-control" id="findByState" name="state">
                            <option value="">所有</option>
                            <option value="2">申请没有被处理</option>
                            <option value="3">申请已经被处理</option>
                        </select>

                    </div>
                    <button type="button" class="btn btn-primary" id="find_modal_btn" onclick="searchApply();">查询</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">领养信息列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped" id="apply_table">
                        <thead>
                        <tr>
                            <%--复选框，因为没有做相关功能，就弃用了--%>
                            <%--<th>
                                <input type="checkbox" id="check_all"/>
                            </th>--%>
                            <th>编号</th>
                            <th>用户名称</th>
                            <th>Email</th>
                            <th>年龄</th>
                            <th>电话</th>
                            <th>申请理由</th>
                            <th>申请时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${applyList}" var="apply">
                            <tr class="text-center">
                                <td class="text-center">${apply.id}</td>
                                <td>${apply.name}</td>
                                <td>${apply.email}</td>
                                <td>${apply.age}</td>
                                <td>${apply.telephone}</td>
                                <td>${apply.message}</td>
                                <td>${apply.applyTime}</td>
                                <td>
                                    <c:if test="${apply.state==2}">
                                        <span class="badge badge-warning">申请没有被处理</span>
                                    </c:if>
                                    <c:if test="${apply.state==3}">
                                        <span class="badge badge-success">申请已经被处理</span>
                                    </c:if>
                                </td>
                                <!-- 修改“修改”链接的 href 属性 -->
                                <td class="text-center">
                                    <a href="#" data-toggle="modal" data-target="#adminEditModal" data-id="${apply.id}" onclick="editApply(${apply.id}); return false;">
                                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
                                    </a>
                                    <a href="#" onclick="deleteApply(${apply.id}); return false;">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                                    </a>
                                </td>
                            </tr>

                        </c:forEach>

                        </tbody>
                    </table>
                    <div class="row">
                        <!--分页文字信息  -->
                        <div class="col-md-8" id="page_info_area"></div>
                        <!-- 分页条信息 -->
                        <div class="col-md-4" id="page_nav_area">

                        </div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 用户查询  end-->
</div>



<!-- 修改弹框 -->
<div class="modal fade" id="adminEditModal" tabindex="-1" role="dialog" aria-labelledby="adminEditModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="adminEditModalLabel">修改申请信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editApplyForm">
                    <input type="hidden" id="editApplyId" name="id">
                    <div class="form-group">
                        <label for="editApplyName">姓名</label>
                        <input type="text" class="form-control" id="editApplyName" name="name" readonly>
                    </div>
                    <div class="form-group">
                        <label for="editApplyState">状态</label>
                        <select class="form-control" id="editApplyState" name="state">
                            <option value="2">申请没有被处理</option>
                            <option value="3">申请已经被处理</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveEditBtn">保存更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 查询结果模态弹框 -->
<div class="modal fade" id="searchResultModal" tabindex="-1" role="dialog" aria-labelledby="searchResultModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchResultModalLabel">查询结果</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名称</th>
                        <th>Email</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>申请理由</th>
                        <th>申请时间</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="searchResultBody">
                    <!-- 查询结果将在这里动态插入 -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入js文件 -->
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/sb-admin-2.js"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
    function editApply(id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/admin/ApplyEdit",
            type: "GET",
            data: {id: id},
            success: function(data) {
                $("#editApplyId").val(data.id);
                $("#editApplyName").val(data.name);
                $("#editApplyState").val(data.state);
            },
            error: function() {
                alert("获取申请信息失败！");
            }
        });
    }

    $(document).ready(function() {
        $("#saveEditBtn").click(function() {
            var id = $("#editApplyId").val();
            var state = $("#editApplyState").val();

            $.ajax({
                url: "${pageContext.request.contextPath}/admin/ApplyEdit",
                type: "POST",
                data: {id: id, state: state},
                success: function() {
                    alert("修改成功！");
                    location.reload();
                },
                error: function() {
                    alert("修改失败！");
                }
            });
        });
    });

    function deleteApply(id) {
        if (confirm("确定要删除这条申请吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/ApplyDelete",
                type: "POST",
                data: {id: id},
                success: function() {
                    alert("删除成功！");
                    location.reload(); // 刷新页面以显示最新的申请列表
                },
                error: function() {
                    alert("删除失败，请稍后再试。");
                }
            });
        }
    }
// 搜索申请
    function searchApply() {
        var state = $("#findByState").val(); // 获取下拉框选中的值

        $.ajax({
            url: "${pageContext.request.contextPath}/admin/ApplySearch", // 后端处理查询的Servlet
            type: "GET",
            data: {state: state}, // 发送查询条件
            success: function(data) {
                // 处理返回的数据，填充模态弹框内容
                var tbody = $("#searchResultBody");
                tbody.empty(); // 清空模态弹框中的表格内容
                $.each(data, function(index, apply) {
                    var row = $("<tr></tr>").addClass("text-center");
                    row.append($("<td></td>").text(apply.id));
                    row.append($("<td></td>").text(apply.name));
                    row.append($("<td></td>").text(apply.email));
                    row.append($("<td></td>").text(apply.age));
                    row.append($("<td></td>").text(apply.telephone));
                    row.append($("<td></td>").text(apply.message));
                    row.append($("<td></td>").text(apply.applyTime));

                    // 根据状态值显示不同的文本
                    var statusText = apply.state === 3 ? '已处理' : (apply.state === 2 ? '未处理' : '未知状态');
                    row.append($("<td></td>").text(statusText));

                    tbody.append(row);
                });

                // 显示模态弹框
                $('#searchResultModal').modal('show');

                // 模态弹框关闭后跳转到 /admin/ApplyList 界面
                $('#searchResultModal').on('hidden.bs.modal', function () {
                    window.location.href = "${pageContext.request.contextPath}/admin/ApplyList";
                });
            },
            error: function() {
                alert("查询失败，请稍后再试。");
            }
        });
    }
</script>
</body>
</html>
